<template>
  <div class="app-container">
    <!-- <div class="filter-container">
      <span>订单编号：</span>
      <el-input
        v-model="paramOrder.orderSn"
        placeholder="请输入订单编号"
        style="width: 200px"
        class="filter-item"
      />
      <span class="leftMar">收件人：</span>
      <el-input
        v-model="paramOrder.addressee"
        placeholder="请输入收件人"
        style="width: 200px"
        class="filter-item"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="search"
      >
        搜索
      </el-button>
    </div> -->
    <el-table
      :data="list"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邀请码" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.invitationCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现比例%" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.commissionRatio + "%" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="row.saleManState == 'NORMAL' ? 'success' : 'info'">{{
            row.saleManState == "NORMAL" ? "正常" : "禁用"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="openSaleMan(row)"
            >修改</el-button
          >
          <el-button
            v-if="row.saleManState == 'NORMAL'"
            size="mini"
            type="danger"
            @click="setSalesManStatus(row.id, 'LOCKED')"
            >禁用</el-button
          >
          <el-button
            v-else
            size="mini"
            type="danger"
            @click="setSalesManStatus(row.id, 'NORMAL')"
            >禁用</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="clearForm"
      center
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        v-if="centerDialogVisible"
      >
        <el-form-item label="名字">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="提成比例%">
          <el-input v-model="form.commissionRatio" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSaleMan">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetSalesManList, SetSalesManStatus, UpdateSaleMan } from "@/api/user";
export default {
  data() {
    return {
      paramOrder: {
        //订单查询条件
        currPage: 1,
        pageSize: 20,
      },
      value1: "",
      listLoading: true, //加载
      list: [], //数据
      centerDialogVisible: false,
      form: {},
    };
  },
  created() {
    this.getSalesManList();
  },
  methods: {
    search() {
      console.log(this.paramOrder);
    },
    //获取业务员
    getSalesManList() {
      GetSalesManList(this.paramOrder).then((res) => {
        console.log(res);
        this.list = res.data.data_list;
        this.listLoading = false;
      });
    },
    //禁用业务员
    setSalesManStatus(id, type) {
      SetSalesManStatus(id, type).then((res) => {
        if (res.code == 200) {
          this.$message.success("设置成功");
          this.getSalesManList();
        }
      });
    },
    //打开业务员弹窗
    openSaleMan(row) {
      this.centerDialogVisible = true;
      this.form = Object.assign({}, row);
    },
    //清除数据
    clearForm() {
      this.form = {};
    },
    //修改业务员信息
    updateSaleMan() {
      UpdateSaleMan(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.success("设置成功");
          this.getSalesManList();
          this.centerDialogVisible = false;
        }
      });
    },
    clearForm() {
      this.form = {};
    },
  },
};
</script>
<style scoped>
.leftMar {
  margin-left: 8px;
}
.filter-container {
  margin-bottom: 10px;
}
</style>